<template>
	<view class="all">
		<view class="zz">
			<view class="one">
				<view class="top">
					<view class="top1">
						<view class="top11">{{addressList.provinceStr}}{{addressList.areaStr}}</view>
						<view class="top12">{{addressList.address}}</view>
						<view class="top13">{{addressList.linkMan}} {{addressList.mobile}}</view>
					</view>
					<view class="top2">
						<view class="top21">
							<u-cell :isLink="true"></u-cell>
						</view>
					</view>
				</view>
				<u-line dashed color="#000"></u-line>
				<view class="kuaidi">
					<text class="kuaidi1">配送方式</text>
					<text class="kuaidi2">快递</text>
				</view>
			</view>
		</view>
		<view class="shangpin">
			<view class="liebiao">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="1">
						<view class="demo-layout bg-purple-light">
							<u-icon name="home-fill"></u-icon>
						</view>
					</u-col>
					<u-col span="11">
						<view class="demo-layout bg-purple">商品列表</view>
					</u-col>
				</u-row>
				<view class="smallbox">
					<view class="img">
						<image src="https://dcdn.it120.cc/2022/02/04/fa78ff5e-553f-40f2-8c78-b7ab8ed8bd39.png"></image>
					</view>
					<view class="content">
						<view class="title_content">
							Redmi充电宝[拼团-无规格]
						</view>
						<view class="detail_content">

						</view>
						<view class="price_content">
							<text style="color: green; font-size: 30rpx;">￥59.00</text>
							<text style="color: #969799;">×3</text>
						</view>
					</view>
				</view>
				<view class="zongjia">
					<view class="zongjia3">￥1.00</view>
					<view class="zongjia2">商品小计:</view>
					<view class="zongjia1">共1件</view>
				</view>
			</view>
		</view>
		<view class="liuyan">
			<view class="liuyan1">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="3">
						<view class="demo-layout bg-purple-light">商家留言</view>
					</u-col>
					<u-col span="9">
						<view class="demo-layoum bg-purple">留言建议提前协商（250字以内）</view>
					</u-col>
				</u-row>
			</view>
			<view class="liuyan2">
				<u--textarea placeholder="请输入内容"></u--textarea>
			</view>
		</view>
		<view class="fukuan">
			<view class="fukuan1">
				付款方式
			</view>
			<view class="fukuan2">
				<view class="fukuan21">
					<view class="yue">余额</view>
					<view class="qian">账户余额：{{walletList.balance}}</view>
				</view>
				<view class="fukuan22">
					<u-checkbox-group>
						<u-checkbox shape="circle" activeColor="green"></u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="yingfu">应付:</view>
			<view class="zz">￥</view>
			<view class="jine">170.01</view>
			<view class="anniu">
				<u-button type="success" text="提交订单" shape="circle" size="large"></u-button>
			</view>
		</view>
		<view class="kongbai"></view>
	</view>
</template>

<script>
	import {
		_shippingaddress,
		_wallet
	} from "../../api/submit.js"
	export default {
		data() {
			return {
				addressList: [],
				walletList: []
			}
		},
		methods: {
			// 地址
			getaddress() {
				_shippingaddress().then(res => {
					console.log(res)
					if (res.code === 0) {
						this.addressList = res.data.info
						console.log(this.addressList, "地址")
					}
				})
			},
			// 资产
			getwalletList() {
				_wallet().then(res => {
					console.log(res)
					if (res.code === 0) {
						this.walletList = res.data
						console.log(this.walletList, "资产")
					}
				})
			}
		},
		onReady() {
			this.getaddress()
			this.getwalletList()
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		height: 100vh;
		background-color: gainsboro;

		.zz {
			width: 94vw;
			height: 38vw;
			box-sizing: border-box;
			padding-top: 2vw;
			margin-left: 3vw;

			.one {
				background-color: #fff;
				border-radius: 4%;
			}

			.top {
				height: 200rpx;
				// background-color: white;
				display: flex;

				.top1 {
					width: 90vw;
					height: 200rpx;
					// background-color: aliceblue;
					padding-left: 4vw;

					.top11 {
						font-size: 24rpx;
						padding-top: 4vw;
					}

					.top12 {
						margin-top: 2vw;
					}

					.top13 {
						font-size: 24rpx;
						margin-top: 2vw;
					}
				}

				.top2 {
					width: 10vw;
					height: 200rpx;

					// background-color: blue;
					.top21 {
						margin-top: 7vw;
					}
				}
			}

			.kuaidi {
				height: 70rpx;
				// background-color: white;
				display: flex;
				justify-content: space-between;
				border-radius: 4%;

				.kuaidi1 {
					margin-left: 4vw;
					line-height: 70rpx;
					font-size: 30rpx;
				}

				.kuaidi2 {
					color: gray;
					margin-right: 3vw;
					line-height: 70rpx;
					font-size: 30rpx;
				}
			}
		}

		.shangpin {
			width: 94vw;
			height: 50vw;
			margin-left: 3vw;
			margin-top: 3vw;
			background-color: white;
			border-radius: 4%;

			.liebiao {
				height: 12rpx;
				margin-left: 3vw;

				.demo-layout {
					line-height: 70rpx;
				}

				.smallbox {
					display: flex;
					height: 180rpx;


					.img {
						box-sizing: border-box;
						flex-basis: 35%;
						padding-right: 3%;


						image {
							width: 100%;
							height: 100%;

							border-radius: 20rpx;
							vertical-align: top;
						}
					}

					.content {

						flex-basis: 65%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						title_content {
							flex-basis: 30%;
						}

						.detail_content {
							flex-basis: 60%;
						}

						.price_content {
							flex-basis: 10%;
							display: flex;
							padding: 0 20rpx 10rpx 5rpx;
							justify-content: space-between;
							align-items: center;
						}
					}
				}

				.zongjia {
					height: 8vw;
					margin-top: 2vw;
					// background-color: blue;
					display: flex;
					flex-direction: row-reverse;

					.zongjia1 {
						margin-right: 3vw;
					}

					.zongjia3 {
						color: limegreen;
					}
				}

			}
		}

		.liuyan {
			width: 94vw;
			height: 40vw;
			margin-left: 3vw;
			margin-top: 2vw;
			background-color: white;
			box-sizing: border-box;
			border-radius: 4%;

			.liuyan1 {
				height: 80rpx;
				// background-color: greenyellow;
				margin-left: 3vw;

				.demo-layout {
					line-height: 60rpx;
				}

				.demo-layoum {
					line-height: 60rpx;
					color: gainsboro;
				}
			}

			.liuyan2 {
				height: 200rpx;
				// background-color: gray;
			}
		}

		.fukuan {
			width: 94vw;
			height: 30vw;
			margin-left: 3vw;
			margin-top: 2vw;
			background-color: white;
			box-sizing: border-box;
			border-radius: 4%;

			.fukuan1 {
				height: 70rpx;
				font-size: 34rpx;
				font-weight: 600;
				line-height: 70rpx;
				margin-left: 3vw;
				// background-color: aqua;
			}

			.fukuan2 {
				height: 150rpx;
				// background-color: red;
				display: flex;

				.fukuan21 {
					width: 90%;
					// background-color: aqua;
					height: 150rpx;

					// padding-left: 3vw;
					.yue {
						height: 70rpx;
						line-height: 70rpx;
						margin-top: 10rpx;
						font-size: 36rpx;
					}

					.qian {
						height: 60rpx;
						line-height: 60rpx;
						color: gainsboro;
					}
				}

				.fukuan22 {
					width: 10%;
					height: 60rpx;
					// background-color: aliceblue;
					margin-top: 40rpx;
				}
			}
		}

		.foot {
			width: 100%;
			height: 8vh;
			background-color: white;
			position: fixed;
			bottom: 0;
			display: flex;

			.yingfu {
				width: 14%;
				margin-top: 4vw;
				margin-left: 3vw;
				font-size: 46rpx;
				font-size: 600;
			}

			.zz {
				width: 3%;
				color: lawngreen;
				margin-top: 4vw;
			}

			.jine {
				width: 45%;
				margin-top: 4vw;
				font-size: 46rpx;
				color: lawngreen;
			}

			.anniu {
				margin-top: 2vw;
			}
		}

		.kongbai {
			height: 15vw;
		}
	}
</style>
